<template>
	<view class="zone">

		<image src="http://image.qxgm.site/tdz/img/tk/yun4.png" mode="widthFix" class="yun4 flybox4"></image>
		<image src="http://image.qxgm.site/tdz/img/tk/yun3.png" mode="widthFix" class="yun3 flybox1"></image>
		<image src="http://image.qxgm.site/tdz/img/tk/yun2.png" mode="widthFix" class="yun2 flybox2"></image>
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="main">
			<!-- 精力值 -->
			<view class="home_right">
				<view class="home_nav">
					<image class="home_navimg" src="http://image.qxgm.site/tdz/img/tough/jingli.png" mode="widthFix">
					</image>
					<text class="home_num">{{userinfo.jingli}}</text>
					<image class="home_more" src="http://image.qxgm.site/tdz/img/public/mg-04.png" mode="widthFix"
						@click="refine = true">
					</image>
				</view>
			</view>

			<!-- 背景图片 -->
			<image class="bg" src="http://image.qxgm.site/tdz/img/tough/13.png" mode="widthFix"></image>


			<!-- 历练选项 -->
			<view :class="['part','part'+item.id,item.is_open==0?'filter':'']" v-for="(item,index) in info" :key="index"
				@click="gotonavto(item)">
				<image class="img" :src="`http://image.qxgm.site/tdz/img/tough/${item.id}.png`" mode="widthFix"></image>
				<image :class="['pbg'+item.id]" src="http://image.qxgm.site/tdz/img/tough/12.png" mode="widthFix">
				</image>
				<view class="tname">
					{{item.name}}
					<view class="jies">
						{{item.memo}}
					</view>
				</view>

				<view class="tpick" v-if="item.left_times!=-1">
					今日剩余:<text class="yellow">{{item.left_times}}</text>次
				</view>
				<image v-if="item.is_open==0" class="suo" src="http://image.qxgm.site/tdz/img/tough/11.png"
					mode="widthFix"></image>
			</view>
		</view>
		<u-tabbar v-model="current" :border-top="false" :list="list" :mid-button="true"></u-tabbar>
		<!-- 次数不足 -->
		<u-mask :show="refine">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>恢复精力</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop2">
							<view class="tboan">
								<view class="tbimg">
									<image class="image" src="http://image.qxgm.site/tdz/img/tk/tk.png" mode="widthFix">
									</image>
									<image class="freeadimg" v-if="ad_free==1"
										src="http://image.qxgm.site/tdz/img/tk/mg-14.png" mode="widthFix"></image>
								</view>
								<view class="uoan">
									<view class="an1">
										看广告恢复精力
									</view>
									<view class="an2">
										点击按钮，每日限制次数
									</view>
								</view>
								<view>
									<view class="num">今日<text>{{use_times}}</text>/{{max_times}}</view>
									<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
										class="refineCon3" @click="seeadv">恢复</u-button>
								</view>

							</view>
							<view class="tboan">
								<view class="tbimg">
									<image class="image" src="http://image.qxgm.site/tdz/img/daolv/smg-03.png"
										mode="widthFix">
									</image>
								</view>
								<view class="uoan">
									<view class="an1">
										使用精力丹恢复精力
									</view>
									<view class="an2">
										每个精力丹恢复10点精力
									</view>
								</view>
								<view>
									<view class="num">
										持有<text
											v-if="jinglilist.length!=0">{{Math.floor(jinglilist.props[0].number)}}</text>
									</view>
									<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
										class="refineCon3" @click="shiyong(jinglilist)">使用</u-button>
								</view>
							</view>
						</view>
					</view>
				</view>
				<image class="m_close" @click="refine = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>
		<!-- 苹果视频 -->
		<u-mask :show="showVideo">
			<view class="videoPop">
				<image class="videocss" :src="video" mode="heightFix"></image>
				<u-count-down class="potime" :autoplay="false" ref="uCountDown" separator-size='24' :font-size='24'
					separator-color='#fff' :show-seconds='true' :show-minutes='false' :show-hours='false' separator='zh'
					:show-days='false' color='#fff' bg-color='none' :timestamp="27"></u-count-down>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						iconPath: "http://image.qxgm.site/tdz/img/tabbar/1.png",
						selectedIconPath: "http://image.qxgm.site/tdz/img/tabbar/11.png",
						text: '',
						count: 0,
						isDot: false,
						customIcon: false,
						pagePath: '/pages/tabbar/home',
					},
					{
						iconPath: "http://image.qxgm.site/tdz/img/tabbar/2.png",
						selectedIconPath: "http://image.qxgm.site/tdz/img/tabbar/22.png",
						text: '',
						count: 0,
						isDot: false,
						customIcon: false,
						pagePath: '/pages/tabbar/experience',
					},
					{
						iconPath: "http://image.qxgm.site/tdz/img/tabbar/4.png",
						selectedIconPath: "http://image.qxgm.site/tdz/img/tabbar/44.png",
						text: '',
						count: 0,
						isDot: false,
						customIcon: false,
						pagePath: '/pages/tabbar/equip',
					},
					{
						iconPath: "http://image.qxgm.site/tdz/img/tabbar/3.png",
						selectedIconPath: "http://image.qxgm.site/tdz/img/tabbar/33.png",
						text: '',
						count: 0,
						isDot: false,
						customIcon: false,
						pagePath: '/pages/tabbar/game',
					}
				],
				current: 1,
				info: [],
				userinfo: uni.getStorageSync('userinfo'),
				refine: false,
				jinglilist: [],
				use_times: '',
				max_times: '',

				showVideo: false,
				video: '',
				timer: '',
				urlCallback: {
					userId: uni.getStorageSync('id'),
					extra: '1_' + uni.getStorageSync('id')
				},
				ad_free: uni.getStorageSync('userinfo').free_ad,
			};
		},
		onShow() {
			this.getlilian()
			this.getUserInfo()
			this.jingli()
		},
		methods: {
			// 获取个人信息
			async getUserInfo() {
				let res = await this.$http.index.getUserInfo()
				if (res.code == 1) {
					this.userinfo = res.data
					this.ad_free = res.data.free_ad
				}
			},
			// 获取历练列表
			async getlilian() {
				let res = await this.$http.index.lilianlist()
				if (res.code == 1) {
					this.info = res.data
				}
			},
			// 点击导航
			gotonavto(item) {
				if (item.is_open == 0) {
					this.$u.toast(item.info)
				} else {
					uni.navigateTo({
						url: '/pages/index/zlrealm?id=' + item.id + '&name=' + item.name,
						animationType: 'none',
						animationDuration: 10
					});
				}
			},
			//精力弹框
			async jingli() {
				let res = await this.$http.index.jingli()
				if (res.code == 1) {
					this.jinglilist = res.data
					this.use_times = res.data.ad.use_times
					this.max_times = res.data.ad.max_times
				}
			},
			//使用精力丹
			async shiyong(item) {
				if (item.props[0].number == 0) {
					this.$u.toast('暂无精力丹!')
					return
				}
				let res = await this.$http.index.usejingli({
					props_id: item.props[0].id
				})
				this.$u.toast(res.msg)
				if (res.code == 1) {
					this.jingli()
					this.getUserInfo()
					this.refine = false
				}

			},

			// 看广告
			async seeadv() {
				this.$u.toast('正在维护中！')
				return
				if (this.use_times >= this.max_times) {
					this.$u.toast('广告次数已达上线！')
					return
				}
				// 没有开通免广告特权
				if (this.ad_free == 0) {
					if (this.$u.os() == 'ios') {
						clearTimeout(this.timer)
						let videoSrc = Math.floor(Math.random() * 5) + 1
						this.video = 'http://image.qxgm.site/tdz/img/video' + videoSrc + '.gif'
						this.showVideo = true
						this.$refs.uCountDown.start();
						// 发送ios开始请求
						this.iosStar()
						this.timer = setTimeout(() => {
							this.showVideo = false
							// 发送ios开始结束
							this.iosEnd()
						}, 27000)
					} else if (this.$u.os() == 'android') {
						this.$p.navto('/pages/index/aniordvideo1?id=' + this.urlCallback.extra)

					} else {
						clearTimeout(this.timer)
						let videoSrc = Math.floor(Math.random() * 5) + 1
						this.video = 'http://image.qxgm.site/tdz/img/video' + videoSrc + '.gif'
						this.showVideo = true
						this.$refs.uCountDown.start();
						this.timer = setTimeout(() => {
							this.showVideo = false
						}, 27000)
					}
				} else {
					// todo 调用接口获得精力
					let res = await this.$http.index.adResult({
						type: 1,
						source: uni.getStorageSync('id')
					})
					if (res.code == 1) {
						this.jingli()
						this.getUserInfo()
						this.$u.toast('跳过广告获得奖励成功！')
					} else {
						this.$u.toast(res.msg)
					}
				}

			},
			async iosStar() {
				let res = await this.$http.index.adlookStart({
					type: 1,
					source: uni.getStorageSync('id')
				})
			},
			async iosEnd() {
				let res = await this.$http.index.adlookEnd({
					type: 1,
					source: uni.getStorageSync('id')
				})
				if (res.code == 1) {
					this.getUserInfo()
					this.jingli()
				}
			},
		},
	}
</script>


<style lang="less">
	.yun4 {
		position: absolute;
		z-index: 9;
		width: 100%;
		top: 2%;
	}

	.yun3 {
		position: absolute;
		z-index: 9;
		width: 48%;
		top: 42%;
	}

	.yun2 {
		position: absolute;
		z-index: 9;
		width: 80%;
		top: 75%;
	}

	.flybox4 {
		animation: mover linear 50s infinite;
	}

	.flybox1 {
		animation: mover linear 35s infinite;
	}

	.flybox2 {
		animation: mover linear 45s infinite;
	}

	@keyframes mover {
		0% {
			transform: translateX(-190px);
		}




		100% {
			transform: translateX(377px);
		}
	}





	.zone {
		min-height: 100vh;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		background: url(http://image.qxgm.site/tdz/img/public/p_bg.png) no-repeat;
		background-size: 100% 100%;
	}

	.main {
		position: relative;
	}

	.bg {
		width: 100%;
	}

	.part {
		position: absolute;
	}

	.tpick {
		font-size: 12px;
		font-weight: normal;
		color: #FFFFFF;
		text-shadow: 0 1px 1px #000;
		text-align: center;
		background: url(http://image.qxgm.site/tdz/img/tk/mg-27.png) no-repeat;
		background-size: 100% 100%;
		width: 80%;
		padding: 3px;
		box-sizing: border-box;
	}

	.yellow {
		color: #FFF000;
	}

	.img {
		width: 100%;
	}

	.suo {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 22px;
	}

	.filter {
		filter: grayscale(50%);
	}

	.part1 {
		width: 36%;
		top: 8%;
		left: 0%;
		z-index: 10;

		.tname {
			position: absolute;
			right: 0;
			top: -10px;
			word-wrap: break-word;
			/*英文的时候需要加上这句，自动换行*/
			/*自测了这句话没啥用*/
			writing-mode: vertical-rl;
			/*从左向右 从右向左是 writing-mode: vertical-rl;*/
			writing-mode: tb-rl;
			/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
			text-align: center;
			padding: 0px;
			display: flex;
			-webkit-display: flex;
			flex-direction: column;
			justify-content: center;
			font-size: 14px;
			font-weight: normal;
			color: #B75233;
			background: url(http://image.qxgm.site/tdz/img/tk/mg-25.png) no-repeat;
			background-size: 100% 100%;
			height: 99px;
			padding: 0px 4px 10px 6px;
			box-sizing: border-box;
		}

		.jies {
			position: absolute;
			right: 25px;
			top: 0px;
			word-wrap: break-word;
			/*英文的时候需要加上这句，自动换行*/
			/*自测了这句话没啥用*/
			writing-mode: vertical-rl;
			/*从左向右 从右向左是 writing-mode: vertical-rl;*/
			writing-mode: tb-rl;
			/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
			text-align: center;
			background: url(http://image.qxgm.site/tdz/img/tk/mg-26.png) no-repeat;
			background-size: 100% 100%;
			height: 99px;
			font-size: 14px;
			color: #FFFFFF;
			padding: 0px 1px 10px 2px;
		}

		.pbg1 {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 34.1%;
		}

	}

	.part2 {
		width: 40%;
		top: 9%;
		right: 6%;
		z-index: 10;

		.tname {
			position: absolute;
			right: 10px;
			top: 10px;
			word-wrap: break-word;
			/*英文的时候需要加上这句，自动换行*/
			/*自测了这句话没啥用*/
			writing-mode: vertical-rl;
			/*从左向右 从右向左是 writing-mode: vertical-rl;*/
			writing-mode: tb-rl;
			/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
			text-align: center;
			padding: 0px;
			display: flex;
			-webkit-display: flex;
			flex-direction: column;
			justify-content: center;
			font-size: 14px;
			font-weight: normal;
			color: #B75233;
			background: url(http://image.qxgm.site/tdz/img/tk/mg-25.png) no-repeat;
			background-size: 100% 100%;
			height: 99px;
			padding: 0px 4px 10px 6px;
			box-sizing: border-box;
		}

		.jies {
			position: absolute;
			right: -19px;
			top: 0px;
			word-wrap: break-word;
			/*英文的时候需要加上这句，自动换行*/
			/*自测了这句话没啥用*/
			writing-mode: vertical-rl;
			/*从左向右 从右向左是 writing-mode: vertical-rl;*/
			writing-mode: tb-rl;
			/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
			text-align: center;
			background: url(http://image.qxgm.site/tdz/img/tk/mg-26.png) no-repeat;
			background-size: 100% 100%;
			height: 99px;
			font-size: 14px;
			color: #FFFFFF;
			padding: 0px 1px 10px 2px;
		}

		.pbg2 {
			position: absolute;
			top: 55%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 30.7%;
		}
	}

	.part3 {
		width: 29%;
		top: 22%;
		left: 5%;
		z-index: 10;

		.tname {
			position: absolute;
			right: -8px;
			top: -10px;
			word-wrap: break-word;
			/*英文的时候需要加上这句，自动换行*/
			/*自测了这句话没啥用*/
			writing-mode: vertical-rl;
			/*从左向右 从右向左是 writing-mode: vertical-rl;*/
			writing-mode: tb-rl;
			/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
			text-align: center;
			padding: 0px;
			display: flex;
			-webkit-display: flex;
			flex-direction: column;
			justify-content: center;
			font-size: 14px;
			font-weight: normal;
			color: #B75233;
			background: url(http://image.qxgm.site/tdz/img/tk/mg-25.png) no-repeat;
			background-size: 100% 100%;
			height: 99px;
			padding: 0px 4px 10px 6px;
			box-sizing: border-box;
		}

		.jies {
			position: absolute;
			right: -18px;
			top: 0px;
			word-wrap: break-word;
			/*英文的时候需要加上这句，自动换行*/
			/*自测了这句话没啥用*/
			writing-mode: vertical-rl;
			/*从左向右 从右向左是 writing-mode: vertical-rl;*/
			writing-mode: tb-rl;
			/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
			text-align: center;
			background: url(http://image.qxgm.site/tdz/img/tk/mg-26.png) no-repeat;
			background-size: 100% 100%;
			height: 99px;
			font-size: 14px;
			color: #FFFFFF;
			padding: 0px 1px 10px 2px;
		}

		.pbg3 {
			position: absolute;
			top: 55%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 42.3%;
		}
	}

	.part4 {
		width: 44%;
		top: 32%;
		right: 0%;
		z-index: 10;

		.tname {
			position: absolute;
			left: 0;
			top: 16px;
			word-wrap: break-word;
			/*英文的时候需要加上这句，自动换行*/
			/*自测了这句话没啥用*/
			writing-mode: vertical-rl;
			/*从左向右 从右向左是 writing-mode: vertical-rl;*/
			writing-mode: tb-rl;
			/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
			text-align: center;
			padding: 0px;
			display: flex;
			-webkit-display: flex;
			flex-direction: column;
			justify-content: center;
			font-size: 14px;
			font-weight: normal;
			color: #B75233;
			background: url(http://image.qxgm.site/tdz/img/tk/mg-25.png) no-repeat;
			background-size: 100% 100%;
			height: 99px;
			padding: 0px 4px 10px 6px;
			box-sizing: border-box;
		}

		.jies {
			position: absolute;
			right: 25px;
			top: 0px;
			word-wrap: break-word;
			/*英文的时候需要加上这句，自动换行*/
			/*自测了这句话没啥用*/
			writing-mode: vertical-rl;
			/*从左向右 从右向左是 writing-mode: vertical-rl;*/
			writing-mode: tb-rl;
			/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
			text-align: center;
			background: url(http://image.qxgm.site/tdz/img/tk/mg-26.png) no-repeat;
			background-size: 100% 100%;
			height: 99px;
			font-size: 14px;
			color: #FFFFFF;
			padding: 0px 1px 10px 2px;
		}

		.pbg4 {
			position: absolute;
			top: 55%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 27.9%;
		}
	}

	.part5 {
		width: 36%;
		top: 52%;
		left: 21%;
		z-index: 10;

		.tname {
			position: absolute;
			left: 0px;
			top: -32px;
			word-wrap: break-word;
			/*英文的时候需要加上这句，自动换行*/
			/*自测了这句话没啥用*/
			writing-mode: vertical-rl;
			/*从左向右 从右向左是 writing-mode: vertical-rl;*/
			writing-mode: tb-rl;
			/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
			text-align: center;
			padding: 0px;
			display: flex;
			-webkit-display: flex;
			flex-direction: column;
			justify-content: center;
			font-size: 14px;
			font-weight: normal;
			color: #B75233;
			background: url(http://image.qxgm.site/tdz/img/tk/mg-25.png) no-repeat;
			background-size: 100% 100%;
			height: 99px;
			padding: 0px 4px 10px 6px;
			box-sizing: border-box;
		}

		.jies {
			position: absolute;
			right: 25px;
			top: 0px;
			word-wrap: break-word;
			/*英文的时候需要加上这句，自动换行*/
			/*自测了这句话没啥用*/
			writing-mode: vertical-rl;
			/*从左向右 从右向左是 writing-mode: vertical-rl;*/
			writing-mode: tb-rl;
			/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
			text-align: center;
			background: url(http://image.qxgm.site/tdz/img/tk/mg-26.png) no-repeat;
			background-size: 100% 100%;
			height: 99px;
			font-size: 14px;
			color: #FFFFFF;
			padding: 0px 1px 10px 2px;
		}

		.pbg5 {
			position: absolute;
			top: 55%;
			left: 62%;
			transform: translate(-50%, -50%);
			width: 34.1%;
		}
	}

	.part6 {
		width: 31%;
		top: 50%;
		right: -3%;
		z-index: 10;

		.tname {
			position: absolute;
			left: -28px;
			top: 2px;
			word-wrap: break-word;
			/*英文的时候需要加上这句，自动换行*/
			/*自测了这句话没啥用*/
			writing-mode: vertical-rl;
			/*从左向右 从右向左是 writing-mode: vertical-rl;*/
			writing-mode: tb-rl;
			/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
			text-align: center;
			padding: 0px;
			display: flex;
			-webkit-display: flex;
			flex-direction: column;
			justify-content: center;
			font-size: 14px;
			font-weight: normal;
			color: #B75233;
			background: url(http://image.qxgm.site/tdz/img/tk/mg-25.png) no-repeat;
			background-size: 100% 100%;
			height: 99px;
			padding: 0px 4px 10px 6px;
			box-sizing: border-box;
		}

		.jies {
			position: absolute;
			right: 25px;
			top: 0px;
			word-wrap: break-word;
			/*英文的时候需要加上这句，自动换行*/
			/*自测了这句话没啥用*/
			writing-mode: vertical-rl;
			/*从左向右 从右向左是 writing-mode: vertical-rl;*/
			writing-mode: tb-rl;
			/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
			text-align: center;
			background: url(http://image.qxgm.site/tdz/img/tk/mg-26.png) no-repeat;
			background-size: 100% 100%;
			height: 99px;
			font-size: 14px;
			color: #FFFFFF;
			padding: 0px 1px 10px 2px;
		}

		.pbg6 {
			position: absolute;
			top: 55%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 39.6%;
		}
	}

	.part7 {
		width: 27%;
		top: 72%;
		left: 0%;
		z-index: 10;

		.tname {
			position: absolute;
			left: 25px;
			top: -72px;
			word-wrap: break-word;
			/*英文的时候需要加上这句，自动换行*/
			/*自测了这句话没啥用*/
			writing-mode: vertical-rl;
			/*从左向右 从右向左是 writing-mode: vertical-rl;*/
			writing-mode: tb-rl;
			/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
			text-align: center;
			padding: 0px;
			display: flex;
			-webkit-display: flex;
			flex-direction: column;
			justify-content: center;
			font-size: 14px;
			font-weight: normal;
			color: #B75233;
			background: url(http://image.qxgm.site/tdz/img/tk/mg-25.png) no-repeat;
			background-size: 100% 100%;
			height: 99px;
			padding: 0px 4px 10px 6px;
			box-sizing: border-box;
		}

		.jies {
			position: absolute;
			right: 25px;
			top: 0;
			word-wrap: break-word;
			/*英文的时候需要加上这句，自动换行*/
			/*自测了这句话没啥用*/
			writing-mode: vertical-rl;
			/*从左向右 从右向左是 writing-mode: vertical-rl;*/
			writing-mode: tb-rl;
			/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
			text-align: center;
			background: url(http://image.qxgm.site/tdz/img/tk/mg-26.png) no-repeat;
			background-size: 100% 100%;
			height: 99px;
			font-size: 14px;
			color: #FFFFFF;
			padding: 0px 1px 10px 2px;
		}

		.pbg7 {
			position: absolute;
			top: 55%;
			left: 100%;
			transform: translate(-50%, -50%);
			width: 45.5%;
		}
	}

	.part8 {
		width: 34%;
		top: 78%;
		right: 23%;
		z-index: 10;

		.tname {
			position: absolute;
			left: 78px;
			top: -32px;
			word-wrap: break-word;
			/*英文的时候需要加上这句，自动换行*/
			/*自测了这句话没啥用*/
			writing-mode: vertical-rl;
			/*从左向右 从右向左是 writing-mode: vertical-rl;*/
			writing-mode: tb-rl;
			/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
			text-align: center;
			padding: 0px;
			display: flex;
			-webkit-display: flex;
			flex-direction: column;
			justify-content: center;
			font-size: 14px;
			font-weight: normal;
			color: #B75233;
			background: url(http://image.qxgm.site/tdz/img/tk/mg-25.png) no-repeat;
			background-size: 100% 100%;
			height: 99px;
			padding: 0px 4px 10px 6px;
			box-sizing: border-box;
		}

		.jies {
			position: absolute;
			right: 25px;
			top: 0px;
			word-wrap: break-word;
			/*英文的时候需要加上这句，自动换行*/
			/*自测了这句话没啥用*/
			writing-mode: vertical-rl;
			/*从左向右 从右向左是 writing-mode: vertical-rl;*/
			writing-mode: tb-rl;
			/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
			text-align: center;
			background: url(http://image.qxgm.site/tdz/img/tk/mg-26.png) no-repeat;
			background-size: 100% 100%;
			height: 99px;
			font-size: 14px;
			color: #FFFFFF;
			padding: 0px 1px 10px 2px;
		}

		.pbg8 {
			position: absolute;
			top: 55%;
			left: 99%;
			transform: translate(-50%, -50%);
			width: 36.1%;
		}
	}


	.home_right {
		position: absolute;
		top: 17px;
		right: 18px;
		z-index: 9;
		width: 100px;
	}

	.home_nav {
		position: relative;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: url(http://image.qxgm.site/tdz/img/public/btn1.png) no-repeat;
		background-size: 100% 100%;
		margin-bottom: 5px;
		padding: 2px 3px 2px 30px;
		box-sizing: border-box;
	}

	.home_navimg {
		position: absolute;
		width: 28px;
		top: -4px;
		left: -3px;
	}

	.home_num {
		font-size: 12px;
		font-weight: normal;
		color: #fff;
		text-align: center;
	}

	.home_more {
		width: 18px;
	}

	.jihuop2 {
		padding: 0 7%;

		.red {
			color: #FF461D;
		}

		.tboan {
			display: flex;
			justify-content: space-between;
			background: url(http://image.qxgm.site/tdz/img/daolv/mg-01.png) no-repeat;
			background-size: 100% 100%;
			padding: 5px 10px;
			margin-top: 2vh;
		}

		.tbimg {
			position: relative;
			width: 22%;
			background: url(http://image.qxgm.site/tdz/img/equipment/mg-03.png) no-repeat;
			background-size: 100% 100%;
			padding: 4px 6px 7px 6px;
			box-sizing: border-box;

			.image {
				width: 100%;
			}
		}

		.freeadimg {
			position: absolute;
			left: -5px;
			top: -10px;
			width: 35px;
			z-index: 9;
		}

		.uoan {
			flex: 1;
			margin-left: 5px;
			width: 50%;
		}

		.an1 {
			font-size: 16px;
			font-weight: normal;
			color: #333333;
			line-height: 18px;
			margin-bottom: 11px;
			margin-top: 5px;
		}

		.an2 {
			font-size: 12px;
			font-weight: normal;
			color: #666666;
			line-height: 14px;
		}

		.num {
			color: #333333;
			font-size: 14px;
			margin-top: 5px;

			text {
				color: #FF6600;
			}
		}
	}


	.refineCon3 {
		display: block;
		margin: 4px auto 0;
		width: 60px;
		text-align: center;
		font-size: 13px;
		padding: 0;
		height: 30px;
		font-weight: normal;
		color: #f9e5b6;
		line-height: 30px;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/liandan/mg-06.png) no-repeat;
		background-size: 100% 100%;
	}
</style>